<template>
	<view class="indexs">
		<view class="header header_lan" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height"
				:style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo">
						<image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image>
					</view>
					<view class="index_wenben baise">{{ $t('my_usercoupon.Select_coupon') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom: 130rpx;'">
			<view class="my_pinzhenglist_center">
				<view class="index_swiper">
					<!--内容布局-->
					<view class="index_list">
						<swiper class="swiper paid_list_cont" @change="pagechange" :current="currentIndex"
							:style="'height:' + height + ';'">
							<block v-for="(item, index) in malllist" :key="index">
								<swiper-item>
									<view :class="'index_list_heji' + index">
										<view class="my_yhq_list" v-if="list.length != 0">
											<view class="my_yhq_cont" :data-id="item.coupon_id" @tap="xuanze"
												v-for="(item, index) in list" :key="index"
												:style="item.state?(item.state.value == '' ? 'filter: grayscale(1)' : ''):''">
												<image :src="imgUrl + '/dzx_img139.png'" v-if="item.color && item.color.value == 10">
												</image>
												<image :src="imgUrl + '/dzx_img139.png'" v-if="item.color && item.color.value == 20"
													style="filter: hue-rotate(100deg)"></image>
												<image :src="imgUrl + '/dzx_img139.png'" v-if="item.color && item.color.value == 30"
													style="filter: hue-rotate(20deg)"></image>
												<image :src="imgUrl + '/dzx_img139.png'" v-if="item.color && item.color.value == 40"
													style="filter: hue-rotate(200deg)"></image>
												<view class="my_yhq_cont_txt">
													<view class="my_yhq_cont_l">
														<view class="my_yhq_cont_t1">{{ item.name }}</view>
														<view class="my_yhq_cont_t2" style="margin-left: 24rpx">
															{{ $t('my_usercoupon.please_use') }}
														</view>
														<view class="my_yhq_cont_t3" v-if="item.expire_type == 20">
															{{ $t('my_usercoupon.valid_until') }}{{ item.start_time.text }}-{{ item.end_time.text }}
														</view>
														<view class="my_yhq_cont_t3" v-if="item.expire_type == 10">
															{{
																$t('my_usercoupon.valid_date', {
																	num: item.expire_day
																})
															}}
														</view>
													</view>
													<view class="my_yhq_cont_r">
														<view class="my_yhq_cont_t4">
															{{ price_mode.unit }}{{ item.reduce_price }}
														</view>
														<view class="my_yhq_cont_t2">
															{{
																$t('my_usercoupon.available', {
																	price: item.min_price
																})
															}}
														</view>
														<view :data-coupon-id="item.coupon_id" class="my_yhq_cont_t5">
															{{ $t('my_usercoupon.Go_to_use') }}
														</view>
													</view>
												</view>
											</view>
										</view>

										<view class="my_yhq_kong" v-else>
											<image :src="imgUrl + '/dzx_img142.png'"></image>
											<text>{{ $t('my_usercoupon.currently_no_coupons') }}</text>
										</view>
									</view>
								</swiper-item>
							</block>
						</swiper>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/shouye/shouye_zkc/shouye_zkc.js
	const app = getApp();
	let request = require('../../../utils/require');
	export default {
		data() {
			return {
				navH: app.globalData.navHeight,
				gaodu: app.globalData.height,
				gaodutops: app.globalData.top,
				imgUrl: app.globalData.imgUrl,
				price_mode: uni.getStorageSync('price_mode'),
				malllist: [{
					id: 0,
					name: '待使用'
				}],
				height: 0,
				heights: 0,
				currentIndex: 0,
				left: 16,
				false: false,
				width: 0,
				type: '',
				list: [],
				coupon_id: 0
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			var that = this;
			that.type= options.type
			that.totalFree= options.free
			that.swiperhegiht(that.currentIndex);
			that.changeline();
		},
		onShow() {
			var that = this;
			that.getCouponList();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			/**
			 * 获取优惠券列表
			 */
			getCouponList: function() {
				var that = this;
				var data = {
					token: uni.getStorageSync('token'),
					data_type: this.currentIndex,
					total_free: this.totalFree
				};
				request.get(`index.php?s=/api/coupon/enablecoupon&wxapp_id=` + uni.getStorageSync('web_id'), data)
					.then(result => {
						that.list= result.data.data.list
						that.notcont= !result.data.data.list.length
						setTimeout(() => {
							that.swiperhegiht(that.currentIndex);
						}, 300);
					});
			},

			xuanze(e) {
				// #ifdef MP-WEIXIN
				if (this.type == 'xuanze') {
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2];
					prevPage.data.coupon_id= e.currentTarget.dataset.id
					uni.navigateBack({
						delta: 1
					});
				}
				// #endif
				// #ifdef H5
				if (this.type == 'xuanze') {
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2];
					prevPage.coupon_id= e.currentTarget.dataset.id
					uni.navigateBack({
						delta: 1
					});
				}
				// #endif
			},

			//swiper切换时会调用
			pagechange: function(e) {
				var that = this;
				that.currentIndex= e.detail.current
				that.swiperhegiht(e.detail.current);
				that.changeline();
				that.getCouponList();
			},

			//swiper单击事件
			getcurrentid(e) {
				console.log(e, 545);
				this.currentIndex= e.currentTarget.dataset.id
			},

			//swiper选项卡的高度
			swiperhegiht(es) {
				var that = this;
				var query = uni.createSelectorQuery();
				query.selectAll('.index_list_heji' + es).boundingClientRect();
				query.exec(res => {
					var listHeight = res[0][0].height;
					that.height= listHeight + 'px'
					that.heights= res[0]
				});
			},

			//下标线左右滑动效果
			changeline: function(e) {
				const query = uni.createSelectorQuery();
				var that = this;
				query.select('.mall_on').boundingClientRect();
				query.exec(function(res) {
					if (res[0] != null) {
						that.left= res[0].left
						that.width= res[0].width
					} else {
						that.left= 0
					}
				});
			},

			jumpzuo() {
				uni.navigateBack();
			}
		}
	};
</script>
<style>
	@import './my_yhq.css';
</style>